<script >
import { clientEvent } from '@/common/index/utils/ClientEvent.js'
import { CHOICE_KEY_BACK, CHOICE_KEY_ENTER } from '@/common/index/config/Event'
import {  choiceTasks } from '../../common/index/utils/toast'
/**
 * 一个通知提示组件
 */
export default {
  props: {
  },
  created () {
    clientEvent.on(CHOICE_KEY_ENTER, this.keyEnter, this)
    clientEvent.on(CHOICE_KEY_BACK, this.keyBack, this)

  },
  watch: {
    show (val) {
      this.timer2 && clearTimeout(this.timer2)
      this.timer && clearTimeout(this.timer)
      if (val) {
        this.hide = false
      } else {
		  
        this.timer2 = setTimeout(() => {
          this.hide = true
          this.title = ""
          this.list = []
        }, 400)
      }
    },
    hide (val) {
      if (val) {
        if (choiceTasks.length == 0) {
          return
        } else {
          setTimeout(() => {
            choiceTasks.shift()()
          }, 0)
        }
      }
    }
  },
  
  data () {
    return {
      title: "",
      list: [],
      timer: null,
      show: false,
      timer: null,
      timer2: null,
      then: null,
      _catch: null,
      hide: true,
      choice: false,
      enterContent: "确定"
    }
  },
  methods: {
    thenClick () {
      const fun = this.then
      this.timer = null
      this.show = false

      this.then = null
      this._catch = null
      fun && fun()

    },
    _catchClick () {
      const fun = this._catch
      this.timer = null
      this.show = false
      this._catch = null
      this.then = null
      fun && fun()
    },
    keyEnter () {
      if (!this.show)
        return
      this.thenClick()
    },
    keyBack () {
      if (!this.show || !this.choice)
        return

      this._catchClick()
    }
  },
  destroyed(){
    choiceTasks.splice(0,choiceTasks.length) 
  }
}
</script>

<template>
  <view v-show="!hide">
    <view :class="{ choiceview: true, hide: hide, notShow: !show }">
      {{ title }}
      <view v-for="(item, index) in list" :key="index" class="content">
        {{ item }}
      </view>
      <view class="choice">
        <button v-show="choice" @click="_catchClick">取消</button>
        <button @click="thenClick">{{ enterContent }}</button>
      </view>
    </view>
    <view class="mask"> </view>
  </view>
</template>

<style lang="scss" scoped>
.choiceview {
  width: 50vw;
  min-height: 25vw;
  font-size: 4vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  padding: 3vw;
  padding-top: 4%;
  text-align: center;
  box-sizing: border-box;
  background: #f0efef;
  border: 1px solid #acaaaa;
  border-radius: 2vw;
  transition: 0.4s;
  font-family: "Microsoft YaHei";
  font-style: normal;
  font-weight: 400;

  .content {
    margin: 3% 0;
    height: 10%;
    font-weight: 100;
  }

  .choice {
    display: flex;
    justify-content: baseline;
    height: 10%;

    button {
      flex: 1;
      padding: 1vw 2vw;
      margin: 0 10%;
      font-size: 3vw;
    }
  }
}

.hide {
  display: none;
}

.notShow {
  opacity: 0;
}
</style>
